<template>
  <div class="reg-main">
    <header class="reg-header">
      <img src="../../assets/images/reg-login/logo.png" alt="logo" style="padding-left: 20px;padding-top: 29px;">
      <div class="reg-rightIn">
        <img width="" src="../../assets/images/reg-login/icon_app.png" alt="手机图标">
        <a href="">APP下载</a>
      </div>
    </header>
    <div class="reg-container">
      <div class="reg-login">
        <LoginForm v-if="type === 'LoginForm'"></LoginForm>
        <RegForm v-else-if="type === 'RegForm'"></RegForm>
        <PwdForm v-else-if="type === 'PwdForm'"></PwdForm>
        <div v-if="type === 'LoginForm'" id="reg-login-link" class="reg-link">
          <a v-on:click="type = 'PwdForm'" href="javascript:void(0);" style="margin-right: 16px;">忘记密码</a>
          <a v-on:click="type = 'RegForm'" href="javascript:void(0);">免费注册</a>
        </div>
      </div>
    </div>
    <web-footer></web-footer>
  </div>
</template>

<script>
  import Footer from '@/components/Footer.vue'
  import LoginForm from '@/components/RegLogin/LoginForm.vue'
  import RegForm from '@/components/RegLogin/RegForm.vue'
  import PwdForm from '@/components/RegLogin/PwdForm.vue'
  export default {
    components: {
      'web-footer': Footer,
      'LoginForm': LoginForm,
      'RegForm': RegForm,
      'PwdForm': PwdForm
    },
    data() {
      return {
        type: 'LoginForm'
      }
    }
  }

</script>

<style>
  a {
    text-decoration: none !important;
  }

  .reg-main {

  }
  .reg-header {
    width: 100%;
    min-width: 1100px;
    height: 86px;

  }
  .reg-container {
    width: 100%;
    min-width: 1200px;
    height: 600px;
    background-image: url(../../assets/images/reg-login/登录背景图.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .reg-rightIn {
    float: right;
    margin: 20px 20px 0 0;
  }
  .reg-login {
    width: 354px;
    height: 355px;
    float: right;
    margin-top: 125px;
    margin-right: 170px;
    background-color: #f0f0f0;
    padding-top: 76px;
  }
  .reg-login-div {
    margin-bottom: 20px;
  }
  .reg-login-div>input {
    height: 42px;
  }
  .reg-login-div>span {
    width:38px;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
  }
  .reg-link {
    margin:70px 27px 0 0;
    float: right;
  }
  .reg-link a {
    color: #777878;
    font-size: 12px;
    font-family: '黑体';
  }
</style>
